<template>
  <div>
    <h2>表格页面</h2>

    <el-button type="primary" icon="el-icon-folder-add" @click="newDialogVisible = true">新增</el-button>
    <el-button type="primary" icon="el-icon-edit" @click="handleEdit">编辑</el-button>
    <el-button type="primary" icon="el-icon-delete" @click="handleDelete">删除</el-button>

    <AddDataForm @addData="handleAddData" :visible.sync="newDialogVisible" v-if="newDialogVisible" />

    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>

  </div>
</template>

<script>
import AddDataForm from '@/components/AddDataForm.vue';

export default {
  name: 'DataTable',
  data() {
    return {
      newDialogVisible: false,

      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      selectedRow: null // 用于存储选中的行数据
    }
  },
  components: {
    AddDataForm
  },
  methods: {
    // 处理新增数据的操作
    handleAddData(newData) {
      this.tableData.push(newData); // 将新数据添加到tableData数组
      this.newDialogVisible = false; // 关闭新建对话框
    },

    // 在这里处理编辑操作
    handleEdit() {
      if (this.selectedRow) {
        // 执行编辑操作，可以显示一个表单供用户编辑数据
        console.log('选中的行数据：', this.selectedRow);
        // 编辑后，你可以将修改后的数据保存回tableData数组
      }
    },

    // 在这里处理删除操作
    handleDelete() {
      if (this.selectedRow) {
        // 执行删除操作，从tableData数组中删除选中的行数据
        const index = this.tableData.indexOf(this.selectedRow);
        if (index !== -1) {
          this.tableData.splice(index, 1);
          this.selectedRow = null; // 清除选中的行
        }
      }
    },

    // 监听表格的选中事件，更新选中的行数据
    handleSelectionChange(selection) {
      if (selection.length > 0) {
        this.selectedRow = selection[0];
      } else {
        this.selectedRow = null;
      }
    }
  }
}


</script>